<template>
  <div class="p-detail">
    <div class="p-detail-title">
      <div class="p-detail-title-left">
        <div class="p-detail-title-left-label"></div>
        <div class="p-detail-title-left-value">证书详情</div>
      </div>
      <div>
        <a-button type="primary" icon="file-search" @click="licDetail">查看证书</a-button>
        <a-button class="p-detail-title-right" type="primary" icon="rollback" @click="back">返回</a-button>
      </div>
    </div>
    <table class="p-detail-table">
      <tbody>
        <tr v-for="item in fieldsList" :key="item.label">
          <td class="p-detail-table-title">
            {{ item.label }}
          </td>
          <td colspan="3" class="p-detail-table-label">
            {{ item.text }}
          </td>
        </tr>
      </tbody>
    </table>
    <div class="p-detail-app" v-if="dataSource.length">
      <div class="p-detail-title-left">
        <div class="p-detail-title-left-label"></div>
        <div class="p-detail-title-left-value">
          {{ subTitle }}
        </div>
      </div>
      <a-table
        :scroll="{ x: 1600 }"
        class="p-detail-app-table"
        rowKey="nanoid"
        :columns="columns"
        :data-source="dataSource"
        bordered
        :pagination="false"
      >
        <span slot="index" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <div v-for="(item, i) in slotArry" :key="i" :slot="item.scopedSlots.customRender" slot-scope="text, record">
          <span v-if="item.type == 'text'">{{ record[item.scopedSlots.customRender] }}</span>
          <span v-else-if="item.type == 'enum'">{{
            getEnumname(record[item.scopedSlots.customRender], item.options)
          }}</span>
          <span v-else-if="item.type == 'date'">{{ dateFormat(record[item.scopedSlots.customRender]) }}</span>
        </div>
      </a-table>
    </div>
  </div>
</template>

<script>
import { viewLicDetail, preview } from '@/api/ent_licSearch/ILic_search.js'
import { qrviewcert } from '@/api/licEntry.js'
import { Tp_licPdf } from '@/enumeration/Tp_lic.js'
import { bizType } from '@/components/ent_licSearch/lictype.js'
import { nanoid } from 'nanoid'
import moment from 'moment'
export default {
  data() {
    return {
      fieldsList: [], // 字段列表
      columns: [], // 从表表头
      dataSource: [], // 从表数据
      subTitle: '', // 从表标题
      hiddenObj: {}, // 隐藏对象字段
      slotArry: [], // 表格插槽列表
      lictypeid: '', // 证书类型
      certno: '', // 证号
      bizType: bizType
    }
  },
  computed: {
    getEnumname() {
      return function(value, options) {
        let name
        if (options.length) {
          options.some(v => {
            if (v.value == value) {
              name = v.label
              return
            }
          })
          return name
        }
      }
    },
    dateFormat() {
      return function(date) {
        if (date) {
          return moment(date).format('YYYY-MM-DD')
        } else {
          return null
        }
      }
    }
  },
  mounted() {},
  methods: {
    // 初始化
    init(lictypeid, id) {
      this.lictypeid = lictypeid
      this.queryLicDetail(lictypeid, id)
    },
    // 查询详情
    async queryLicDetail(lictypeid, id) {
      let res = await viewLicDetail({ lictypeid: lictypeid, id: id })
      this.dataSource = []
      this.fieldsList = []
      this.columns = []
      this.slotArry = []
      if (res.code == 0) {
        res.data.forEach(v => {
          if (v.enname == this.bizType[lictypeid]) {
            this.certno = v.text
          }
          if (v.type == 'table') {
            this.subTitle = v.name
            if (v.subtabdata?.length) {
              this.dataSource = v.subtabdata.map(item => {
                return {
                  nanoid: nanoid(),
                  ...item
                }
              })
            }
            v.head.forEach(item => {
              if (item.type != 'hidden') {
                this.slotArry.push({
                  title: item.cnname,
                  align: 'left',
                  width: '250px',
                  scopedSlots: {
                    customRender: `${item.enname}`.toUpperCase()
                  },
                  type: item.type,
                  options: item.options
                })
              }
            })
            this.columns = [
              {
                title: '序号',
                align: 'center',
                width: '70px',
                scopedSlots: { customRender: 'index' }
              },
              ...this.slotArry
            ]
          } else if (v.type == 'hidden') {
            this.hiddenObj[v.enname] = v.text
          } else {
            this.fieldsList.push(v)
          }
        })
      } else {
        this.$message.error(res.msg)
      }
    },
    // 证书详情
    async licDetail() {
      let res = await qrviewcert({ certno: this.certno, type: this.lictypeid })
      if (res.code == 0) {
        if (res.data) {
          this.viewLic(res.data)
        } else {
          this.$message.warning('未查询到证面pdf信息！')
        }
      }
    },
    // 查看证书
    async viewLic(e) {
      let code = ''
      if (e.lictypeid in Tp_licPdf) {
        code = e.id
      } else {
        code = e.society_credit_code
      }
      let res = await preview({
        lictype: e.lictypeid,
        code: code,
        src: 'latest'
      })
      let objectURL
      if (
        e.auth_code == null ||
        e.auth_code == '' ||
        e.auth_code.indexOf('toSign') != -1 ||
        e.auth_code.indexOf('notDocked') != -1
      ) {
        objectURL = window.URL.createObjectURL(
          new Blob([res], {
            type: 'application/pdf;charset-UTF-8'
          })
        )
      } else {
        objectURL = `http://59.63.125.69:8880/yjlic-data-svr/license/viewpdf?auth_code=${e.auth_code}`
      }
      window.open(objectURL, '_blank', 'resizable,scrollbars,status')
    },
    // 返回
    back() {
      this.$emit('back')
    }
  }
}
</script>

<style lang="less" scoped>
.p-detail-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.p-detail-title-left {
  display: flex;
  align-items: center;
}

.p-detail-title-left-label {
  width: 3px;
  height: 14px;
  background: #0b51c1;
  border-radius: 2px;
}

.p-detail-title-left-value {
  margin-left: 6px;
  font-size: 16px;
  color: #0b51c1;
  font-weight: 550;
}

.p-detail-table {
  margin-top: 20px;
  width: 100%;
}

.p-detail-table-title {
  width: 20%;
  padding: 12px;
  background: #f6f8fc;
  border: 1px solid #e3e8ee;
  font-size: 16px;
  color: #7b8186;
}

.p-detail-table-label {
  width: 80%;
  padding: 12px;
  padding-left: 15px;
  border: 1px solid #e3e8ee;
  font-size: 16px;
  color: #333333;
  word-break: break-all;
}

.p-detail-app {
  margin-top: 20px;
}

.p-detail-app-table {
  margin-top: 20px;
}

/deep/.ant-table-thead > tr > th {
  font-size: 16px !important;
  color: #7b8186 !important;
  background: #f6f8fc !important;
}

.p-detail-title-right {
  margin-left: 20px;
}
</style>
